<!DOCTYPE html>
<html>
    <head>
        <!-- 当前文档的字符集编码为utf-8 -->
        <meta charset="utf-8">
        <meta name = "author" content="wyrQF">
        <meta name="keywords" content="CGI开发 H5模版 千锋教育 西安物联网">
        <title>HTML5模版-主页</title>
        <!-- 引入外联样式 -->
        <style>
            /* 标签的类型： 块级  行内   行内块  修改标签类型可以通过display样式属性
                display:none; 隐藏标签
                display:block; 将标签类型修改为块级
                        inline; 行内 ，没有宽和高属性
                        inline-block; 行内块，具有宽和高
            */
            div{
                display: none;
            }
            div,span{
                display: inline-block;
                width: 100px;
                border: 1px solid red;
                height: 100px;
                text-align: center;
                /* line-height: 行高 一般指定基准线 */
                line-height: 100px;
            }
            /* 属性动画  transition  */
            div:hover,span:hover{
                background-color: hotpink;
                color: rgb(121, 56, 205);
                font-size: 20px;
                transform: scale(1.5,1.5) rotate(360deg);
                transition: all 2s ease-in;
                
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <span>a</span>
        <span>b</span>
    </body>
</html>
